<template>
 <div>
    <el-menu default-active="2" class="el-menu-vertical-demo navLeft" router unique-opened
           background-color="#324157" text-color="#bfcbd9" active-text-color="#ffd04b">
    <div v-for="(item,index) in navData">
        <el-submenu v-if="item.children" :index="index+''"  :key="index">
            <template slot="title">
              <span>{{item.name}}</span>
            </template>
            <el-menu-item v-for="child in item.children" :key="child.name" :index="child.path">{{child.name}}</el-menu-item>
        </el-submenu>
              <el-menu-item v-else :index="item.path">
                <span slot="title">{{item.name}}</span>
              </el-menu-item>
      </div>
    </el-menu>
 </div>

</template>

<script>
  import aside from './nav.js'
  export default {
    data () {
      return {
        navData: aside
      }
    },
    created(){
      console.log(this.navData)
    },
    methods: {}

  }
</script>
<style lang="">
    .navLeft{
        width:200px;
        height:580px;
    }
</style>

